<template>
  <div>
    <h2>复选框</h2>
    <p style="margin-bottom: 50px"> 对element-ui checkbox二次封装 封装数据源,支持url、枚举、字典渲染</p>

    <el-divider content-position="left">基础用法</el-divider>
    <div class="demo-block">
      <div class="source">

        <div class="demo-item" style="width: 350px;">
          <es-checkbox
            v-model="value"
            url="/static/json/dict.json"
          ></es-checkbox>
        </div>

        <div class="demo-item" style="width: 350px;">
          <es-checkbox
            v-model="value1"
            url="/static/json/dict.json"
            all-choose-btn
          ></es-checkbox>
        </div>

        <div class="demo-item" style="width: 350px;">
          <es-checkbox
            v-model="value2"
            url="/static/json/dict.json"
            all-choose-btn
          ></es-checkbox>
        </div>


      </div>
      <div class="meta">
        <div class="description">
          <p>url 通过url获取数据</p>
          <p>enum-name 通过枚举名称获取数据</p>
          <p>dict-name 通过字典名称获取数据</p>
          <p>all-choose-btn开启全选功能</p>
        </div>
        <div class="hljs highlight">
          <code>
            &lt;es-checkbox
            <br>&nbsp;&nbsp;&nbsp;&nbsp;v-model="<span class="attr">value</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;url="<span class="attr">/static/json/dict.json</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;all-choose-btn
            <br>> &lt;/es-checkbox>
          </code>
        </div>
      </div>
      <div class="demo-block-control" @click="showCode($event)">
        <i class="el-icon-caret-bottom"></i>
        <span>显示代码</span>
      </div>
      <div class="demo-block-control none" @click="hideCode($event)">
        <i class="el-icon-caret-top"></i>
        <span>隐藏代码</span>
      </div>
    </div>

    <el-divider content-position="left">禁用</el-divider>
    <div class="demo-block">
      <div class="source">

        <div class="demo-item" style="width: 350px;">
          <es-checkbox
            v-model="value"
            url="/static/json/dict.json"
            all-disabled
          ></es-checkbox>
        </div>

        <div class="demo-item" style="width: 350px;">
          <es-checkbox
            v-model="value3"
            url="/static/json/disabled.json"
          ></es-checkbox>
        </div>


      </div>
      <div class="meta">
        <div class="description">
            all-disabled:全部禁用<br>
            指定数据禁用请在数据中添加disabled，参考下面返回格式
        </div>
        <div class="hljs highlight">
          <code>
            &lt;es-checkbox
            <br>&nbsp;&nbsp;&nbsp;&nbsp;v-model="<span class="attr">value</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;url="<span class="attr">/static/json/dict.json</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;all-disabled
            <br>> &lt;/es-checkbox>
          </code>
        </div>
      </div>
      <div class="demo-block-control" @click="showCode($event)">
        <i class="el-icon-caret-bottom"></i>
        <span>显示代码</span>
      </div>
      <div class="demo-block-control none" @click="hideCode($event)">
        <i class="el-icon-caret-top"></i>
        <span>隐藏代码</span>
      </div>
    </div>

    <el-divider content-position="left">可选数量限制</el-divider>
    <div class="demo-block">
      <div class="source">

        <div class="demo-item" style="width: 350px;">
          <es-checkbox
            v-model="value4"
            url="/static/json/dict.json"
            :min="1"
            :max="3"
          ></es-checkbox>
        </div>

      </div>
      <div class="meta">
        <div class="description">
          <p>数字或布尔类型的属性，需在属性前缀添加冒号</p>
        </div>
        <div class="hljs highlight">
          <code>
            &lt;es-checkbox
            <br>&nbsp;&nbsp;&nbsp;&nbsp;v-model="<span class="attr">value</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;url="<span class="attr">/static/json/dict.json</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;:min="<span class="attr">1</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;:max="<span class="attr">3</span>"
            <br>> &lt;/es-checkbox>
          </code>
        </div>
      </div>
      <div class="demo-block-control" @click="showCode($event)">
        <i class="el-icon-caret-bottom"></i>
        <span>显示代码</span>
      </div>
      <div class="demo-block-control none" @click="hideCode($event)">
        <i class="el-icon-caret-top"></i>
        <span>隐藏代码</span>
      </div>
    </div>

    <el-divider content-position="left">按钮样式</el-divider>
    <div class="demo-block">
      <div class="source">

        <div class="demo-item" style="width: 350px;">
          <es-checkbox
            v-model="value5"
            url="/static/json/dict.json"
            size="medium"
            is-button
          ></es-checkbox>
        </div>

        <div class="demo-item" style="width: 350px;">
          <es-checkbox
            v-model="value6"
            url="/static/json/dict.json"
            size="mini"
            is-button
          ></es-checkbox>
        </div>

      </div>
      <div class="meta">
        <div class="description">
          <p>is-button:按钮样式</p>
          <p>size:按钮大小 </p>
        </div>
        <div class="hljs highlight">
          <code>
            &lt;es-checkbox
            <br>&nbsp;&nbsp;&nbsp;&nbsp;v-model="<span class="attr">value</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;url="<span class="attr">/static/json/dict.json</span>"
            <br>&nbsp;&nbsp;&nbsp;&nbsp;:is-button
            <br>&nbsp;&nbsp;&nbsp;&nbsp;:size="<span class="attr">mini</span>"
            <br>> &lt;/es-checkbox>
          </code>
        </div>
      </div>
      <div class="demo-block-control" @click="showCode($event)">
        <i class="el-icon-caret-bottom"></i>
        <span>显示代码</span>
      </div>
      <div class="demo-block-control none" @click="hideCode($event)">
        <i class="el-icon-caret-top"></i>
        <span>隐藏代码</span>
      </div>
    </div>

    <el-divider content-position="left">数据返回格式</el-divider>
    <div class="demo-block">
      <div class="source">
        <span class="attr">code</span>&nbsp;&nbsp;200成功 其他失败
        <br><span class="attr"> msg</span>&nbsp;&nbsp;附带消息 请求失败时弹出msg中的消息
        <br><span class="attr">data</span>&nbsp;&nbsp;返回的数据放在data中
      </div>
      <div class="meta">
        <div class="hljs highlight">
          <code>
            {
            <br>&nbsp;&nbsp;"code":200,
            <br>&nbsp;&nbsp;"msg":"success"
            <br>&nbsp;&nbsp;"data":[
            <br>&nbsp;&nbsp;&nbsp;&nbsp;{
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"value":"1",
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"label":"男",
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"disabled":true,
            <br>&nbsp;&nbsp;&nbsp;&nbsp;},
            <br>&nbsp;&nbsp;&nbsp;&nbsp;{
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"value":"2",
            <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"label":"女",
            <br>&nbsp;&nbsp;&nbsp;&nbsp;}
            <br>&nbsp;&nbsp;]
            <br>}
          </code>
        </div>
      </div>
      <div class="demo-block-control" @click="showCode($event)">
        <i class="el-icon-caret-bottom"></i>
        <span>显示代码</span>
      </div>
      <div class="demo-block-control none" @click="hideCode($event)">
        <i class="el-icon-caret-top"></i>
        <span>隐藏代码</span>
      </div>
    </div>

    <el-divider content-position="left">Attributes</el-divider>
    <div class="demo-block demo-table">
      <demo-table :table-data="tableData"></demo-table>
    </div>

  </div>
</template>

<script>
  import DemoTable from '../../components/module/demo-table'

  export default {
    name: 'zwTreeDemo',
    components: {DemoTable},
    data () {
      return {
        showId: 0,
        value: [1, 3],
        value1: [2, 3],
        value2: [1,2,3,4],
        value3:[1, 3],
        value4:[1, 2],
        value5:[1, 2],
        value6:[2, 3],
        tableData: [
          {
            param: 'v-model',
            remark: '选中的值',
            type: 'Array',
            usable: '—',
            default: '—'
          },
          {
            param: 'data',
            remark: 'json数组',
            type: 'Array',
            usable: '—',
            default: '—'
          },
          {
            param: 'url',
            remark: '数据源地址url',
            type: 'string',
            usable: '—',
            default: '—'
          },
          {
            param: 'enum-name',
            remark: '后端枚举名称',
            type: 'string',
            usable: '—',
            default: '—'
          },
          {
            param: 'dict-name',
            remark: '字典名称',
            type: 'string',
            usable: '—',
            default: '—'
          },
          {
            param: 'all-choose-btn',
            remark: '是否显示全选按钮',
            type: 'boolean',
            usable: '—',
            default: 'false'
          },
          {
            param: 'all-disabled',
            remark: '是否全部禁用',
            type: 'boolean',
            usable: '—',
            default: 'false'
          },
          {
            param: 'max',
            remark: '可被勾选的 checkbox 的最大数量',
            type: 'number',
            usable: '—',
            default: '—'
          },
          {
            param: 'min',
            remark: '可被勾选的 checkbox 的最小数量',
            type: 'number',
            usable: '—',
            default: '—'
          },
          {
            param: 'is-button',
            remark: '是否是按钮样演示',
            type: 'boolean',
            usable: '—',
            default: 'false'
          },
          {
            param: 'size',
            remark: '按钮样式大小',
            type: 'string',
            usable: 'medium / small / mini',
            default: '—'
          },
        ]
      }
    },
    methods: {
      showCode (e) {
        e.currentTarget.parentElement.childNodes[2].style.display = 'block'
        e.currentTarget.style.display = 'none'
        e.currentTarget.parentElement.childNodes[6].style.display = 'block'
      },
      hideCode (e) {
        e.currentTarget.parentElement.childNodes[2].style.display = 'none'
        e.currentTarget.style.display = 'none'
        e.currentTarget.parentElement.childNodes[4].style.display = 'block'
      },
    }
  }
</script>

<style scoped>
  .demo-block {

  }
</style>
